<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>

</head>
<body>

<div id="app">

    <table border="1">
        <tr>
            <td>序号</td>
            <td>ID</td>
            <td>商品名称</td>
            <td>商品价格</td>
        </tr>
        <tr v-for="(g,index) in goods"  >
            <td v-text="index+1" v-if="index%2 == 0" style="background-color: darkorange"></td>
            <td v-text="index+1" v-if="index%2 != 0" style="background-color: red"></td>
            <td v-text="g.id"></td>
            <td v-text="g.goodsName"></td>
            <td v-text="g.goodsPrice"></td>
        </tr>
    </table>

</div>

</body>

<script>
    Vue.createApp({
        data() {
            return {
                goods:[
                    {id:1,goodsName:'华为手机',goodsPrice:6666},
                    {id:2,goodsName:'苹果手机',goodsPrice:5666},
                    {id:3,goodsName:'小米手机',goodsPrice:7666},
                    {id:4,goodsName:'一加手机',goodsPrice:4666},
                    {id:5,goodsName:'oppo手机',goodsPrice:8666},
                ]
            }
        },
        methods: {

        }
    }).mount("#app")
</script>

</html>